<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <title>时间数据</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/department.css" />
   
  </head>
  <body class="pear-container">

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md12">
        <div class="layui-collapse">
          <div class="layui-colla-item">
            <h2 class="layui-colla-title">条件检索</h2>
            <div class="layui-colla-content" id="searchContentDiv">
              <div class="layui-card-body" style="background-color: #FFF;">
                <form class="layui-form" action="" lay-filter="form-filter">

                  <div class="layui-row layui-col-space10">
                  
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">设备号</label>
                        <div class="layui-input-block">
                          <input type="text" name="machineNo" autocomplete="off" placeholder="设备号"
                            class="layui-input">
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4">
                      
                    </div>
                  </div>


                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                      <div class="layui-form-item">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-block">
                          <input id="searchDateRange" type="text" name="searchDateRange" autocomplete="off" placeholder="选择日期范围" class="layui-input">
                        </div>
                      </div>
                    </div>
                  </div>


                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">其他关键字</label>
                        <div class="layui-input-block">
                          <input type="text" name="otherKeywords" autocomplete="off" placeholder="请输入关键字" class="layui-input"/>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4"></div>
                    <div class="layui-col-md4">
                      <div style="position: relative;height:40px">
                        <div class="button-container">
                          <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                          lay-filter="conditionSearch">
                            <i class="layui-icon layui-icon-ok"></i>
                            提交条件
                          </button>
                          <button type="reset" class="pear-btn pear-btn-sm" id="resetConditionSearch">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置条件
                          </button>
                        </div>
                      </div>
                      
                      
                    </div>
                    
                  </div>

                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
            <table id="shift-capacity-record-table" lay-filter="shift-capacity-record-table"></table>
          </div>
        </div>
      </div>
    </div>

    <script type="text/html" id="my-row-toolbar">
      <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
      </button>
      <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" >
        <i class="layui-icon layui-icon-delete"></i>
      </button>
    </script>


    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../lay-ext/dayjs.min.js"></script>

    <script type="text/javascript">
      // 加载自定义模块,检查浏览器和token
      layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
      layui.use(
        ["table", "form", "jquery", "myheader", "popup", "layer","laydate"],
        function () {
          let table = layui.table;
          let form = layui.form;
          let $ = layui.jquery;
          let myheader = layui.myheader;
          let popup = layui.popup;
          let layer = layui.layer;
          let laydate = layui.laydate;

          // 定义全局 ajax的请求头
          myheader.ajaxGlobal(myheader.checkToken().tokenValue);

          // 定义常量
          const baseUrl = myheader.baseUrl();
          const MODULE_PATH = "operate/";
          const mypage = {};

          laydate.render({
            elem: '#searchDateRange'
            ,range:'~'
          })

          // 列参数
          let recordCols = [
            [
              { type: "numbers" },
              { title: "用户", templet:function(d){
                if(d.user!=null) return d.user.userFullName
                return 'ERROR!!'
              }},
              { title: "设备号",templet:function(d){
                return d.shiftCapacityRecord.machineNo
              } },
              { title: "记录时间", 
                minWidth:180, 
                templet:function(d){
                  if(d.shiftCapacityRecord.recordTimeDT ==null || d.shiftCapacityRecord.recordTimeDT==0 || d.shiftCapacityRecord.recordTimeDT==''){
                    return ''
                  }
                  if(dayjs(d.shiftCapacityRecord.recordTimeDT).hour()==19){
                    return  "<font style='color:#8d6449;white-space:pre-wrap'>"+dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD  HH点')+"</font>" 
                  }
                  if(dayjs(d.shiftCapacityRecord.recordTimeDT).hour()==7){
                    // return dayjs(d.recordTimeDT).format('YYYY-MM-DD') + "&nbsp;&nbsp;&nbsp;<font style='color:#d9a62e'>一值</font>"
                    return  "<font style='color:#d9a62e;white-space:pre-wrap'>"+dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD  HH点')+"</font>" 
                  }
                  return '<font style="white-space:pre-wrap">'+dayjs(d.shiftCapacityRecord.recordTimeDT).format('YYYY-MM-DD  HH点')+'</font>' 
                  return  '<font style="color: #f00;">错误</font>'
                }
              },
              { 
                title: "计划产量kpcs", 
                templet:function(d){
                  if(d.shiftCapacityRecord.planOutput ==null || d.shiftCapacityRecord.planOutput==0 || d.shiftCapacityRecord.planOutput==''){
                    return 0
                  }
                  return d.shiftCapacityRecord.planOutput.toLocaleString()
                }
              },
              { 
                title: "实际产量kpcs", 
                templet:function(d){
                  if(d.shiftCapacityRecord.actualOutput==null || d.shiftCapacityRecord.actualOutput==0 || d.shiftCapacityRecord.actualOutput==''){
                    return 0
                  }
                  return d.shiftCapacityRecord.actualOutput.toLocaleString()
                }
              },
              { 
                title: "不良数pcs", 
                templet:function(d){
                  if(d.shiftCapacityRecord.defect==null || d.shiftCapacityRecord.defect==0 || d.shiftCapacityRecord.defect==''){
                    return 0
                  }
                  return d.shiftCapacityRecord.defect.toLocaleString()
                }
              },
              {
                title:'备注',
                field: "recordRemark",
                templet:function(d){
                  return d.shiftCapacityRecord.recordRemark
                }
              },
              { title: "操作", toolbar: "#my-row-toolbar", align: "center" ,minWidth:'110',fixed:'right'},
            ],
          ];

          // 渲染表格
          const tableIdx = table.render({
            elem: "#shift-capacity-record-table",
            // 请求
            url: baseUrl + "/shiftcaparecord/findAll",
            cols: recordCols,
            response: {
              // 重新设定返回的数据格式
              statusCode: 200, //默认返回 code:0 为返回成功,改成200
              countName: "total", //默认数组总量字段是count,改成total
            },
            // 样式
            skin: "line",
            lineStyle:"height:auto",

            //分页
            page: true, // 分页
            // 工具
            // 头部左侧工具栏使用模板
            toolbar: "#my-toolbar",
            // 头部右侧工具栏
            defaultToolbar: [
              {
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
              },
              // "filter",
              // "exports",
              // "print",
            ],
            // 单元格编辑的触发方式
            // editTrigger:'dblclick',
            // 渲染完以后的回调
            done:function(){
              $(".layui-table").css("width", "100%");
              $("th[data-field='bar']").css("border-right", "none");
              
              // layer.tips('双击可编辑','.laytable-cell-1-0-2',{tips:1})
              
              // 解决固定列高度的bug
              $(".layui-table-main tr").each(function (index, val) {
                $(".layui-table-fixed").each(function () {
                  $($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
                });
              });
              $(".layui-table-header tr").each(function (index, val) {
                $(".layui-table-fixed").each(function () {
                  $($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
                });
              });

            }
          });

          // 工具栏
          table.on("toolbar(shift-capacity-record-table)", function (obj) {
            const layEvent = obj.event;
            if (layEvent === "refresh") {
              table.reloadData("shift-capacity-record-table", {
                scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
              });
            } else if(layEvent==='addMaintsItem') {
              mypage.addMaintsItem()
            } else if (layEvent==='searchKeyword'){
              mypage.searchKeyword()
            } else if(layEvent==='clearSearch'){
              mypage.clearSearch()
            }
          });

          // 行 事件
          table.on("tool(shift-capacity-record-table)", function (obj) {
            let layEvent = obj.event; // 当前事件

            if (layEvent === "setEnable") {       // 改变行的enable值  
              mypage.setEnable(obj);
            } else if (layEvent === "remove") {    // 删除行 
              mypage.delLine(obj);
            } else if (layEvent === "edit") {     // 编辑行
              mypage.edit(obj);
            } 
          });

          // 单元格编辑事件
          table.on("edit(shift-capacity-record-table)",function(obj){
            // mypage.editCell(obj)
          })

          // 查看行详细数据
          mypage.viewdata=function(obj){
            let data = obj.data;
            layui.sessionData('fu2zi',{
              key:'fuinfo',
              value:data
            })
            layer.open({
              type: 2,
              title: "查看数据详细",
              shade: 0.4,
              area: ["50%", "100%"],
              content: MODULE_PATH + "shiftcapacityrecord-edit.html",
            });

          }

          // 删除行 函数
          mypage.delLine = function (obj) {
            let data = obj.data;
            layer.confirm("确定删除吗?", function (layerIdx) {
              $.ajax(baseUrl + "/shiftcaparecord/delShiftCapacityRecord", {
                type: "post",
                data: {
                  shiftCapaRecordID: data.shiftCapacityRecord.shiftCapaRecordID,
                },
                success: function (res) {
                  if(res.code==200){
                    popup.success("设定已保存")
                    }
                  else {
                    popup.failure(res.msg+"<br>或无权限")
                  }

                },
                complete: function () {
                  table.reloadData('shift-capacity-record-table',{
                    scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                  })
                  layer.close(layerIdx); //关闭确认框
                },
              });
            });
          };
          
          mypage.edit=function(obj){
            layui.sessionData('fu2zi',{
              key:'fuinfo',
              value:obj.data
            })
            layer.open({
              type: 2,
              title: "修改数据",
              shade: 0.4,
              area: ["50%", "100%"],
              content: MODULE_PATH + "shiftcapacityrecord-edit.html",
            });
          }

          form.on('submit(conditionSearch)',function(data){

            $('#searchContentDiv').removeClass('layui-show')
            table.reloadData('shift-capacity-record-table',{
              where:data.field,
              page:{
                curr:1
              }
            })
            return false;
          })         
          $("#resetConditionSearch").click(function(){
            table.reloadData('shift-capacity-record-table',{
              where: null,
              page:{
                curr:1
              }
            })
          })
          
        }
      );
    </script>
  </body>
</html>
